<template>
	<div class="about">
		<h1>敬请期待</h1>
		<el-tabs tab-position="right" @tab-click="choseChannel">
			<el-tab-pane label="佛乐">
				佛乐
			</el-tab-pane>
			<el-tab-pane name="pz" label="读书">
				读书
			</el-tab-pane>
			<el-tab-pane label="乐器">乐器</el-tab-pane>
			<el-tab-pane label="其他">其他</el-tab-pane>
		</el-tabs>

	</div>
</template>

<script>
	export default {
		name: 'About',
		components: {
			
		},
		data() {
			return {
				items: []
			}
		},
		mounted() {
			// this.append();
		},
		methods: {
			/**
			 * I am mocking a API call that load 20 objects at a time.
			 */
			append() {
				for (let i = 0; i < 20; i++) {
					this.items.push({
						title: `Item ${this.items.length}`,
						content: 'Content'
					})
				}
			},
			choseChannel(tab, event) {
				console.log(tab, event);
				if (tab.name == 'pz') {
					this.append();
					// 触发‘配置管理’事件
				}
			}
		}
	}
</script>

<style>

</style>
